<template lang="html">
  <!-- 页头 -->
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img width="64" height="64" :src="seller.avatar" alt="seller.name">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="sname">{{seller.name}}</span>
        </div>
        <div class="description">
          {{seller.description}} / {{seller.deliveryTime}} 分钟送达
        </div>
        <div v-if="seller.supports" class="support">
          <span class="icon" :class="supportClass[seller.supports[0].type]"></span>
          <span class="activity">
            {{seller.supports[0].description}}
          </span>
        </div>
        <div @click="detailShow=true" v-if="seller.supports" class="support-count">
          <span class="count">{{seller.supports.length}}个</span>
          <i class="icon-keyboard_arrow_right"></i>
        </div>
      </div>
    </div>
    <div @click="detailShow=true" class="bulletin-wrapper">
      <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
    <div class="bg">
      <img :src="seller.avatar" width="100%" height="100%">
    </div>
    <!-- 公告及优惠活动页 -->
    <div v-show="detailShow" class="detail">
    </div>
  </div>
</template>

<script>
import './header.scss';
export default {
  props: ['seller'],
  data() {
    return {
      supportClass: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
      detailShow: false,
    }
  },
  methods: {

  }
}
</script>
